<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>门诊详情表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
    <script type="text/javascript">
        function check(){
            if(!document.getElementById("patientId1").checked && !document.getElementById("patientId0").checked){
            	layer.msg('必须选择支付状态',{icon:2});
               return false;
               }
            return true;
        }
    </script>
	<fieldset class="layui-elem-field layui-field-title" style="margin-top:20px;">
		<legend>查询条件</legend>
	</fieldset>
	<!-- 查询条件开始 -->
	<form action="" class="layui-form" method="post">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">病人编号</label>
				<div class="layui-input-inline">
					<input name="payInId" class="layui-input" type="text" >
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">项目编号</label>
				<div class="layui-input-inline">
					<input name="payWayId" class="layui-input" type="text" >
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">支付状态</label>
				<div class="layui-input-inline">
					<input name="receiptId" title="已支付" type="radio" value="1">
      				<input name="receiptId" title="未支付" type="radio" value="0">
				</div>
			</div>		
			<div class="layui-inline">
				<label class="layui-form-label" style="width:130px;">订单日期范围</label>
				<div class="layui-input-inline">
					<input name="note"  type="text" class="layui-input" id="note" >
				</div>
			</div>
			
			<div class="layui-inline">
			    <div class="layui-input-block">
			      <button class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-search" type="button" id="doSearch" lay-filter="doSearch" lay-submit="">查询</button>
			      <button class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" type="reset">重置</button>
			    </div>
			 </div>
			
		</div>
	</form>
	
	<!-- 查询条件结束 -->
	<div style="display: none;" id="userToolBar">
		门诊病人挂号账单
	</div>	
		<!-- 弹出层开始 -->
	<div style="display:none;" id="addOrEditDiv">
		<form id="dataForm" lay-filter="dataForm" class="layui-form layui-form-pane " style="padding: 20px" action="">
			<div class="layui-form-item" style="display:none;">
				<label class="layui-form-label">隐藏域保存患者id</label>
				<div class="layui-input-block">
					<input name="payInStatus" class="layui-input" type="text" id="payInStatus">
				</div>
			</div>
		
			<div class="layui-form-item">
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-block">
					<input name="patientName" class="layui-input" type="text" autocomplete="off" readonly="readonly">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">项目编号</label>
				<div class="layui-input-block">
					<input name="typeid" class="layui-input" type="text" autocomplete="off" readonly="readonly">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">支付日期</label>
				<div class="layui-input-block">
					<input id="addDate" name="payInDate" class="layui-input" type="text" autocomplete="off" lay-verify="required">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">订单金额</label>
				<div class="layui-input-block">
					<input name="payInPrice" class="layui-input" type="text" autocomplete="off" lay-verify="required">
				</div>
			</div>			
			<div class="layui-form-item">
				<label class="layui-form-label">缴费状态</label>
				<div class="layui-input-block">
					<input name="patientId" title="已支付" type="radio" value="1" id="patientId1">
      				<input name="patientId" title="未支付" type="radio" value="0" id="patientId0">
				</div>
			</div>

			<div class="layui-form-item" align="center">
				<div class="layui-input-block">
					<button class="layui-btn layui-btn-sm layui-icon layui-icon-release" type="submit" lay-filter="doSubmit" lay-submit="">保存</button>
				</div>
			</div>
		</form>
	</div>
	<!-- 弹出层结束 -->
	
	<!-- 数据表格开始 -->
	<table class="layui-hide" id="payInTable" lay-filter="userTable" ></table>
	<div style="display: none ;" id="rightToolBar" >
		<button class="layui-btn layui-btn-sm" type="button" lay-event="edit">编辑</button>
	</div>
	<!-- 数据表格结束 -->

	<script src="../../layuiadmin/layui/layui.js" charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

	<script type="text/javascript">
		layui.use([ 'element', 'jquery', 'layer', 'form', 'table', 'laydate' ],
				function() {
					var element = layui.element;
					var $ = layui.jquery;
					var layer = layui.layer;
					var form = layui.form;
					var table = layui.table;
					var laydate = layui.laydate;
					//渲染表格
					table.render({
						elem : '#payInTable',
						url : '/payIn/outSearchDetails',
						title : '门诊挂号表',
						toolbar : "#userToolBar",
						limits:[10,20,30],
						page : true,
						even: true,
				        method: "post",
				        contentType: 'application/json',
						cols : [ [
						{type : 'checkbox',fixed : 'left'},
						{field : 'patientId',title : '病人id'},
						{field : 'patientName',title : '姓名'},
						{field : 'typeid',title : '项目编号'},
						{field : 'payInDate',title : '支付日期'},
						{field : 'payInPrice',title : '订单金额'},
						{field : 'payInStatus',title : '缴费状态'},
						{fixed : 'right',align : 'center',toolbar : '#rightToolBar'}
						] ]
					});
					
			        laydate.render({
				          elem: '#note',
				          range:true,
				          min:-60,
				          max:0,
				        });
			        laydate.render({
				          elem: '#addDate',
				          type: 'datetime',
				        });
					//5行中工具条事件
					table.on('tool(userTable)', function(obj) { //注：tool 是工具条事件名，userTable 是 table 原始容器的属性 lay-filter="对应的值"
						var data = obj.data; //获得当前行数据
						var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

						if (layEvent === 'edit') { //编辑
							openEdit(data);
						}
					});
			        
					//打开修改页面
					function openEdit(data){
						layer.open({
							type:1,
							title:'修改订单信息',
							content:$("#addOrEditDiv"),
							area:['800px'],
							success:function(index){
								form.val("dataForm",data);
							}
						});
					}
					
					//触发更新按钮
					form.on("submit(doSubmit)",function(data){
						if(!check()){
							return false;
						}
						$.ajax({
							url:'/payIn/payInModifyOut',
							contentType:'application/json;charset=utf-8',
							type:"post",
							data:JSON.stringify(data.field),
							success:function(res){
								layer.msg(res.msg,{icon:1});
 								setTimeout(function(){
                           			 window.location.reload();//修改成功后刷新父界面
                      			  }, 500);
								layer.closeAll('page');
							}
						});
						return false;
					});
					
					form.on("submit(doSearch)",function(data){
						console.log(JSON.stringify(data.field));
						$.ajax({
							url:'/payIn/outSearchDetails',
							contentType:'application/json;charset=utf-8',
							type:"post",
							data:JSON.stringify(data.field),
							//获得搜索结果后重新渲染表格
							success:function(res){
								console.log(res);
								table.render({
									elem : '#payInTable',
									data:res.data,
									title : '门诊挂号表',
									toolbar : "#userToolBar",
									limits:[10,20,30],
									page : true,
									even: true,
							        method: "post",
							        contentType: 'application/json',
									cols : [ [
									{type : 'checkbox',fixed : 'left'},
									{field : 'patientId',title : '病人id'},
									{field : 'patientName',title : '姓名'},
									{field : 'typeid',title : '项目编号'},
									{field : 'payInDate',title : '支付日期'},
									{field : 'payInPrice',title : '订单金额'},
									{field : 'payInStatus',title : '缴费状态'},
									{fixed : 'right',align : 'center',toolbar : '#rightToolBar'}
									] ]
								});
							}
						}); 
						return false;
					});
				});
	</script>
</body>
</html>
